<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<title>Fluctuate</title>
		
		<link rel="stylesheet" href="blank.css" />
		
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
		<script type="text/javascript" src="fluctuate.js"></script>
		
		<script type="text/javascript">
			// exemple contrôle du refresh 
			
			$(function() 
			{
				$('#names_refresh').click(function() {
					
					$('#names_list').fluctuate('reloadContent');
					
					return false;
				});
				
			});
		</script>
		
	</head>
	<body>
		
		<h1>Fluctuate</h1>
		<p>An AJAX based template engine and CSS helper</p>
		
		<h2>Liste (depuis array statique)</h2>
		
		<ul fluctuate="from:names" id="names_list">
			<li value="@this"></li>
		</ul>
		<a href="#" id="names_refresh">Refresh names</a>
		
		<div post-data="id:3">
			<h2>single variable ( where id= ... )</h2>
			<div fluctuate="from:whereTest" value="@this.name"></div>
		</div>
		
		<h2>Forms (Ajax flavour)</h2>
		
		<div fluctuate="from:maitrises">
			<form action="fluctuate.php" method="post">
				
				<fieldset class="@parity">
					
					<input type="hidden" name="form_id" value="@this.id" />
					
					<label>Name</label>
					<input type="text" name="name" value="@this.name" />
					
					<label>Stuff</label>
					<input type="text" name="stuff" value="@this.stuff" />
					
					<label>Text</label>
					<input type="text" name="text" value="@this.text" />
					
					<input type="submit" value="Save" ajax="ajax" />
					
				</fieldset>
				
			</form>
		</div>
		
		
		<h2>Liste </h2>
		
		<ul fluctuate="from:maitrises">
			<li value="@this.name"> </li>
		</ul>
		
		
		<h2>Table (refresh = 60 secondes)</h2>
		
		<table border="1" width="800">
			
			<thead>
				<th>date</th><th>text</th><th>stuff</th>
			</thead>
			
			<tbody fluctuate="from:maitrises, refresh:60">
				<tr class="@index @parity">
					<td value="@this.date"></td>
					<td value="@this.text"></td>
					<td value="@this.stuff"></td>
				</tr>
			</tbody>
			
		</table>		
		
		<h2>File include (the ajax way !)</h2>
		
		<div fluctuate="from:included_html"></div>
	</body>
 
</html>
